<template>
    <el-card>
        <el-row :gutter="20">
            <el-col :span="6">
                <el-input v-model.trim="SearchParams.name" placeholder="请输入姓名"></el-input>
            </el-col>
            <el-col :span="6">
                <el-select v-model="SearchParams.department" placeholder="请选择部门">
                    <el-option label="全部" :value="0"></el-option>
                    <el-option label="总裁办" :value="1"></el-option>
                    <el-option label="技术部" :value="2"></el-option>
                    <el-option label="市场部" :value="3"></el-option>
                    <el-option label="维修部" :value="4"></el-option>
                    <el-option label="客服部" :value="5"></el-option>
                </el-select>
            </el-col>
            <el-col :span="6">
                <el-button type="primary" @click="loadData">查询</el-button>
                <el-button @click="resetSearchParams">重置</el-button>
            </el-col>
        </el-row>
    </el-card>
    <el-card class="mt">
        <el-table :data="dataList" v-loading="loading">
            <el-table-column type="index" label="序号" width="80"></el-table-column>
            <el-table-column prop="account" label="账号"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="phone" label="电话"></el-table-column>
            <el-table-column prop="idNo" label="身份证"></el-table-column>
            <el-table-column prop="position" label="职位">
                <template #default="scope">
                    <el-tag type="primary">{{ scope.row.position }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop='department' label="部门"></el-table-column>
            <el-table-column prop='pageAuthority' label="页面权限">
                <template #default="scope">
                    <el-tag type="success">{{ scope.row.pageAuthority }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="btnAuthority" label="按钮权限">
                <template #default="scope">
                    <el-tag type="info">{{ scope.row.btnAuthority }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="220">
                <template #default="scope">
                    <el-button size="small" type="primary"
                        @click="setPromise(scope.row.pageAuthority, scope.row.account)">权限设置</el-button>
                    <el-button size="small" type="danger" @click="delUser">删除</el-button>
                    <el-button size="small" type="danger" @click="disabledUser">禁用</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination class="mt mb fr" v-model:current-page="pageInfo.page" v-model:page-size="pageInfo.pageSize"
            :page-sizes="[10, 20, 30, 40]" background layout="total, sizes, prev, pager, next, jumper" :total="totals"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </el-card>
    <AuthModal :visible="visible" :checkedKeys="checkedKeys" @close="visible = false" :BtnAuth="BtnAuth"
        :accountNo="accountNo" @reload="loadData"></AuthModal>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { MenuItem } from '@/type/user'
import { useHttp } from '@/hook/useHttps'
import { getUserAuthListAPI } from '@/api/system'
import { ElMessage } from 'element-plus'
import AuthModal from './components/AuthModal.vue'
interface SearchParamsType {
    name: string,
    department: number
}
const visible = ref<boolean>(false)
const checkedKeys = ref<string[]>([])
const BtnAuth = ref<string[]>([])
const accountNo = ref<string>('')
const SearchParams = ref<SearchParamsType>({
    name: '',
    department: 0
})
const setPromise = async (pageAuthority: string, account: string) => {
    // 获取当前用户的页面权限和按钮权限
    accountNo.value = account
    const { data: { list, btn } } = await getUserAuthListAPI(pageAuthority)
    console.log(btn, 'btn')
    console.log(list, 'list')
    checkedKeys.value = collectUrls(list)
    visible.value = true
    BtnAuth.value = btn

}

function collectUrls(tree: MenuItem[]) {
    const urls: string[] = []
    function travser(node: MenuItem) {
        if (node.url && !node.children) {
            urls.push(node.url)
        }
        if (node.children) {
            node.children.forEach((item: MenuItem) => travser(item))
        }
    }
    tree.forEach((node: MenuItem) => travser(node))
    return urls
}

const { dataList, totals, loading, pageInfo, loadData, handleSizeChange, handleCurrentChange, resetPagination } = useHttp('/permissionList', SearchParams)
const resetSearchParams = () => {
    SearchParams.value = {
        name: '',
        department: 0
    }
    resetPagination()
}
const delUser = () => {
    ElMessage({
        message: '删除成功',
        type: 'success',
    })
    loadData()
}
const disabledUser = ()=>{
        ElMessage({
        message: '禁用成功',
        type: 'success',
    })
    loadData()
}
</script>